<template>
    <div>
      <el-row :gutter="20">
        <el-col :sm="16">
          <div class="common-box" style="padding: 0;">
            <div class="common-title" style="padding-left: 10px;padding-top: 20px;">用户基本信息</div>
            <div class="mt10">
              <table width="100%" class="common-tab-details">
                <tr>
                  <td rowspan="3" class="common-top">用户头像：</td>
                  <td rowspan="3"><img src="/static/images/banner1-1.jpg"></td>
                  <td>用户昵称：</td>
                  <td>张无忌</td>
                </tr>
                <tr>
                  <td>用户ID：</td>
                  <td>1003</td>
                </tr>
                <tr>
                  <td>用户电话：</td>
                  <td>1839949485(联通)</td>
                </tr>
                <tr>
                  <td>用户姓名：</td>
                  <td>未认证</td>
                  <td>用户身份证：</td>
                  <td>未认证</td>
                </tr>
                <tr>
                  <td>注册时间：</td>
                  <td>2017-10-20 14:00:00</td>
                  <td>短信到期时间：</td>
                  <td>2017-12-19</td>
                </tr>
                <tr>
                  <td>收款账户：</td>
                  <td>1839484</td>
                  <td>社区账号状态：</td>
                  <td>正常</td>
                </tr>
                <tr>
                  <td>省份：</td>
                  <td>重庆</td>
                  <td>市：</td>
                  <td>重庆</td>
                </tr>
                <tr>
                  <td>睿汇账号：</td>
                  <td>394048@qq.com</td>
                  <td>MT4账号：</td>
                  <td>387349348</td>
                </tr>
                <tr>
                  <td>V汇账号：</td>
                  <td>未绑定</td>
                  <td>V汇MT4账号：</td>
                  <td>未绑定</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="mt20">
            <el-tabs v-model="activeName" type="border-card">
              <el-tab-pane label="讲师信息" name="first">
                <teacher-info></teacher-info>
              </el-tab-pane>
              <el-tab-pane label="账户&交易" name="second">
                <account-transaction></account-transaction>
              </el-tab-pane>
              <!--<el-tab-pane label="用户团队" name="third">-->
                <!--<user-team></user-team>-->
              <!--</el-tab-pane>    暂时不做-->
              <el-tab-pane label="操作记录" name="fourth">
                <operation-record></operation-record>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :sm="8">
          <div class="">
            <div class="common-box-tag">
              <div class="title">用户管理</div>
              <div class="common-box">
                <div>
                  <el-row :gutter="10">
                    <el-col :sm="8">
                      <el-button type="primary" plain size="mini">封禁</el-button>  <!--解封-->
                    </el-col>
                    <el-col :sm="8">
                      <el-button type="primary" plain size="mini">编辑讲师信息</el-button>  <!--仅讲师-编辑讲师信息；非讲师-编辑用户昵称-->
                    </el-col>
                    <el-col :sm="8">
                      <el-button type="primary" plain size="mini">注销讲师资格</el-button>
                    </el-col>
                  </el-row>
                </div>
                <div class="mt15">
                  <el-row :gutter="10">
                    <el-col :sm="8">
                      <el-button type="primary" plain size="mini">提升精品讲师</el-button>
                    </el-col>
                    <el-col :sm="8">
                      <el-button type="primary" plain size="mini">提升保障讲师</el-button>
                    </el-col>
                    <el-col :sm="8"></el-col>
                  </el-row>
                </div>
              </div>
            </div>
            <div class="common-box-tag mt20">
              <div class="title">近期开设的课程</div>
              <div class="common-white-bac">
                <el-table
                  :data="latestClass"
                  style="width: 100%">
                  <el-table-column
                    prop="time"
                    label="课程ID">
                  </el-table-column>
                  <el-table-column
                    prop="time"
                    label="专业">
                  </el-table-column>
                  <el-table-column
                    prop="time"
                    label="课程名称">
                  </el-table-column>
                  <el-table-column
                    prop="time"
                    label="盈利金额">
                  </el-table-column>
                  <el-table-column
                    prop="time"
                    label="开课日期"
                    width="120">
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="common-box-tag mt20">
              <div class="title">近期参与课程</div>
              <div class="common-white-bac">
                <el-table
                  :data="latestClass"
                  style="width: 100%">
                  <el-table-column
                    prop="time"
                    label="课程ID">
                  </el-table-column>
                  <el-table-column
                    prop="time"
                    label="专业">
                  </el-table-column>
                  <el-table-column
                    prop="time"
                    label="课程费用">
                  </el-table-column>
                  <el-table-column
                    prop="time"
                    label="盈利金额">
                  </el-table-column>
                  <el-table-column
                    prop="time"
                    label="参与时间"
                    width="120">
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="common-box-tag mt20">
              <div class="title">近期跟单记录</div>
              <div class="common-box">
                <div class="common-slag">
                  <el-row :gutter="5">
                    <el-col :sm="14">
                      <div class="common-base-block fl" style="background: #C60A00;">$-20</div>
                      <div class="fl ml10 greyBasic">
                        <p>USDJPYBO，5min，涨</p>
                        <p class="mt10">跟单金额：$20</p>
                      </div>
                    </el-col>
                    <el-col :sm="10">
                      <div class="tr greyBasic">
                        <p>自动</p>
                        <p class="mt10">2017-10-23 11:12:32</p>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import teacherInfo from './DetailsTable/teacherInfo.vue';
  import accountTransaction from './DetailsTable/accountTransaction.vue';
  import userTeam from './DetailsTable/userTeam.vue';
  import operationRecord from './DetailsTable/operationRecord.vue';
    export default {
        data() {
            return {
              activeName: 'first',
              latestClass:[{time:'2017-10-20'}]
            };
        },
        mounted() {

        },
        methods: {},
        components:{
          teacherInfo,
          accountTransaction,
          userTeam,
          operationRecord
        }
    };
</script>
<style scoped></style>
